<template>
    <div class="app-container">
        <div class="content" v-loading="loading">
            <div class="axisY" v-for="itemY in axisY">
                <div class="axisX" v-for="itemX in axisX">
                    <el-button :type="formatBtnType(itemX,itemY)" class="btnitem" icon="el-icon-s-custom"
                               slot="reference" @click="changeInvalidArr(itemX,itemY)">
                    </el-button>
                </div>
            </div>
        </div>
        <div class="notes" slot="footer">
            <el-button size="mini" class="notes">无效</el-button>
            <el-button type="primary" size="mini" class="notes">有效</el-button>
        </div>
        <div slot="footer" class="footer">
            <el-button @click="close">取消</el-button>
            <el-button type="primary" @click="handelConfirm">确定</el-button>
        </div>
    </div>
</template>
<script>
    import {addSeatList, listSeat} from "@/api/backstage/invalidSeat"

    export default {
        inheritAttrs: false,
        components: {},
        props: {
            formData: {
                type: Object,
                default: {
                    id: undefined,
                    axisX: undefined,
                    axisY: undefined,
                }
            }
        },
        data() {
            return {
                loading: false,
                visible: false,
                invalidArr: [],
                axisX: [],
                axisY: [],
                rules: {},
            }
        },
        computed: {},
        watch: {},
        created() {
        },
        mounted() {
            this.inInt();
        },
        methods: {
            inInt() {
                this.loading = true;
                for (let i = 1; i <= this.formData.axisX; i++) {
                    this.axisX.push(i);
                }
                for (let i = this.formData.axisY; i >= 1; i--) {
                    this.axisY.push(i);
                }
                let data = {
                    modelId: this.formData.id
                }
                listSeat(data).then(resp => {
                    this.invalidArr = resp.rows;
                    this.loading = false;
                })
            },
            changeInvalidArr(x, y) {
                if (this.isExitInvalid(x, y)) {
                    this.handelEffective(x, y);
                } else {
                    this.handelInvalid(x, y);
                }
            },
            isExitInvalid(x, y) {
                let bo = false;
                this.invalidArr.forEach((item, index) => {
                    if (item.axisX === x && item.axisY === y) {
                        bo = true;
                    }
                })
                return bo;
            },

            handelEffective(x, y) {
                this.invalidArr.forEach((item, index) => {
                    if (item.axisX === x && item.axisY === y) {
                        this.invalidArr.splice(index, 1);
                    }
                })
            },
            formatBtnType(x, y) {
                let val = "primary";
                this.invalidArr.forEach(item => {
                    if (item.axisX === x && item.axisY === y) {
                        val = "";
                    }
                });
                return val;
            },
            handelInvalid(x, y) {
                this.invalidArr.push({axisX: x, axisY: y, modelId: this.formData.id});
            },
            close() {
                this.$emit("close");
            },
            handelConfirm() {
                if (this.invalidArr.length === 0) {
                    this.invalidArr = [
                        {modelId: this.formData.id}
                    ]
                }
                addSeatList(this.invalidArr).then(resp => {
                    this.msgSuccess(resp.msg);
                });
                this.$emit("close");
            },
        }
    }

</script>
<style scoped>

    .axisY {
        display: flex;
        width: 100%;
    }

    .axisX {
        flex: 1;
        border: 1px solid lightgrey;
        float: left;
        margin: auto;
    }

    .btnitem {
        display: block;
        margin: 0 auto;
    }

    .footer {
        float: right;
        margin-top: 10px;
    }

    .notes {
        float: left;
        margin-top: 5px;
    }
</style>
